.ball-running { 
    width: 100px;
    height:100px;
    background: red;
    transform: translate(0, 0);
    animation: run-around 4s infinite ease-in-out;
    animation-direction: reverse;
}
@keyframes run-around { 
    0%  { transform: translate(0, 0)}
    25% { transform: translate(0, 200px)}
    50% { transform: translate(200px, 200px) }
    75% { transform: translate(200px, 0) }
}